<template>
  <div class="p-x-8">
    <router-link
      v-for="doc in docs"
      :key="doc.id"
      :to="`/spaces/${doc.product_id}/resources-docs/${doc.id}`"
      class="block easy-container-mini p-x-8 border-bottom">
      <div class="title line2">{{ doc.title }}</div>
      <div class="f-mini info-deep">
        <i class="el-icon-user"></i>
        {{ doc.owner.nickname }}
      </div>
      <div class="line3">{{ doc.description }}</div>
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'active-docs', // 最新资源
  data() {
    return {
      docs: [],
      loading: false,
    };
  },
  created() { this.loadDocs(); },
  methods: {
    loadDocs() {
      this.loading = true;
      this.$api.homepage.docs()
        .then((res) => { this.docs = res.data; })
        .catch(() => {})
        .then(() => { this.loading = false; });
    },
  },
};
</script>

<style lang="scss">
a.easy-container-mini:first-of-type { padding-top: 0; }
a.easy-container-mini:hover>.title { text-decoration: underline; }
</style>
